<template>
  <view id="addlocationbox">
    <!-- 搜索框 -->
    <view class="searchbox">
      <view class="search">
        <view>
          <image src="../../static/message/search.png"
            style="width: 32rpx;height: 32rpx;padding-top: 15rpx;padding-right: 20rpx;" mode="">
          </image>
        </view>
        <view style="padding-top: 8rpx;">
          <input type="text" placeholder="请输入位置">
        </view>
      </view>
      <view class="sbutton">
        搜索
      </view>
    </view>
    <!-- 搜索框 -->
    <!-- 内容 -->
    <view class="content">
      <view class="searchitem">
        <view class="searchtit">
          武汉市财政学校
        </view>
        <view class="searchtext">
          <view class="text">
            湖北省武汉市汉阳区永丰街道汉阳大道790号
          </view>
          <view>
            3.54km
          </view>
        </view>
      </view>

      <view class="searchitem">
        <view class="searchtit">
          武汉市财政大学（西院）
        </view>
        <view class="searchtext">
          <view class="text">
            湖北省武汉市汉阳区永丰街道
          </view>
          <view>
            3.54km
          </view>
        </view>
      </view>

      <view class="searchitem">
        <view class="searchtit">
          武汉市财政学校
        </view>
        <view class="searchtext">
          <view class="text">
            湖北省武汉市汉阳区永丰街道汉阳大道790号
          </view>
          <view>
            3.54km
          </view>
        </view>
      </view>

      <view class="searchitem">
        <view class="searchtit">
          武汉市财政学校
        </view>
        <view class="searchtext">
          <view class="text">
            湖北省武汉市汉阳区永丰街道汉阳大道790号
          </view>
          <view>
            3.54km
          </view>
        </view>
      </view>

      <view class="searchitem">
        <view class="searchtit">
          武汉市财政学校
        </view>
        <view class="searchtext">
          <view class="text">
            湖北省武汉市汉阳区永丰街道汉阳大道790号
          </view>
          <view>
            3.54km
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  #addlocationbox {

    // 搜索框
    .searchbox {
      width: 100vw;
      height: 125rpx;
      background-color: white;
      padding: 28rpx 36rpx;
      box-sizing: border-box;
      display: flex;
      border-top: #F0F0F0 2rpx solid;
      border-bottom: #F0F0F0 2rpx solid;

      .search {
        padding-left: 20rpx;
        box-sizing: border-box;
        width: 65%;
        display: flex;
        height: 100%;
        border-radius: 30rpx;
        background-color: #F0F0F0;
      }

      .sbutton {
        text-align: center;
        line-height: 60rpx;
        font-size: 34rpx;
        font-weight: bold;
        color: white;
        border-radius: 20rpx;
        margin-left: 24rpx;
        width: 30%;
        height: 100%;
        background-color: #FF2A31;
      }
    }

    // 搜索框
    // 内容
    .content {
      background-color: rgb(245, 245, 245);

      .searchitem {
        box-sizing: border-box;
        padding: 20rpx 32rpx;
        width: 100vw;
        height: 134rpx;
        background-color: white;
        border-bottom: solid 2rpx #F0F0F0;

        .searchtit {
          font-weight: bold;
          font-size: 32rpx;
        }

        .searchtext {
          padding-top: 8rpx;
          width: 100%;
          display: flex;
          font-size: 28rpx;
          color: #AAAAAA;
          justify-content: space-between;

          .text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 500rpx;

          }
        }
      }
    }

    // 内容
  }
</style>